<template>
  <!--MES-->
  <div style="position: relative;">
    <el-row>
      <el-col :span="splitScreen? 16:24">
        <el-card style="height: calc( 100vh - 85px); overflow:auto;">
          <!-- 信息搜索框 -->
          <el-form v-model="queryObj" label-width="100px" size="large">
            <el-row>
              <el-col :span="7" style="margin-right: 15px">
                <el-form-item label="发送方：">
                  <el-select v-model="queryObj.sender" style="width:100%" placeholder="请选择发送方">
                    <el-option label="" :value="null" />
                    <el-option label="WCS" :value="1" />
                    <el-option label="MES" :value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7" style="margin-right: 15px">
                <el-form-item label="消息类型：">
                  <el-select v-model="queryObj.requestType" style="width:100%" placeholder="请选择消息类型">
                    <!-- <el-option label="" :value="null" /> -->
                    <el-option label="Report" :value="1" />
                    <el-option label="Request" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-show="isopen" :span="7" style="margin-right: 15px">
                <el-form-item label="状态：">
                  <el-select v-model="queryObj.status" style="width:100%" placeholder="请选择状态">

                    <el-option v-for="item in  statusDataLabel" :key="item.value" :label="item.label" :value="item.value" />
                    <!-- <el-option label="" :value="null" />
                    <el-option label="Wait" :value="1" />
                    <el-option label="Finished" :value="2" />
                    <el-option label="Error" :value="3" />
                    <el-option label="Closed" :value="4" /> -->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-show="isopen" :span="7" style="margin-right: 15px">
                <el-form-item label="事件名：">
                  <el-input v-model.trim="queryObj.eventName" placeholder="请输入事件名" />
                </el-form-item>
              </el-col>
              <el-col v-show="isopen" :span="7" style="margin-right: 15px">
                <el-form-item label="时间：">
                  <el-date-picker v-model="timestart_end" style="width:100%" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy/MM/dd HH:mm:ss"
                    value-format="yyyy/MM/dd HH:mm:ss" @change="handleDataChanged" range-separator="至" :default-time="['00:00:00', '23:59:59']" />
                </el-form-item>
              </el-col>

              <el-col :span="8" style="float: right;margin-left:20px">
                <el-button type="primary" @click="queryClick">{{ $t('button.search') }}</el-button>
                <el-button type="primary;" style="" @click="querHhistory">搜索历史</el-button>
                <el-button @click="resetQuery">{{ $t('button.reset') }}</el-button>
                <el-button type="text" @click="isopenclick">
                  {{ !isopen ? `${$t('button.unfold')}` : `${$t('button.retract')}` }}
                </el-button>
              </el-col>

            </el-row>
          </el-form>
          <!-- 调整状态按钮 -->
          <el-row style="margin-bottom: 10px">
            <div style="float: left" />
            <div style="float: right">
              <div style="font-size: 30px; display: inline-block; margin-right: 5px">
                <a href="#">
                  <el-tooltip class="item" effect="dark" content="列位置" placement="top" style="cursor:pointer">
                    <el-dropdown trigger="click" :hide-on-click="false">
                      <span class="el-dropdown-link">
                        <i class="el-icon-s-grid el-icon--right" style="font-size:24px;color:black" />
                      </span>
                      <el-dropdown-menu slot="dropdown" style=" width:190px;height:300px;overflow:auto">
                        <el-dropdown-item><el-checkbox v-model="deleteCell.issender">发送方</el-checkbox></el-dropdown-item>
                        <el-dropdown-item><el-checkbox v-model="deleteCell.ismsgData">收到数据</el-checkbox></el-dropdown-item>
                        <el-dropdown-item><el-checkbox v-model="deleteCell.isretrun">返回数据</el-checkbox></el-dropdown-item>
                        <el-dropdown-item><el-checkbox v-model="deleteCell.isrequestType">消息类型</el-checkbox></el-dropdown-item>
                        <el-dropdown-item><el-checkbox v-model="deleteCell.isstatus">status</el-checkbox></el-dropdown-item>
                        <el-dropdown-item><el-checkbox v-model="deleteCell.iseventName">事件名</el-checkbox></el-dropdown-item>
                        <el-dropdown-item><el-checkbox v-model="deleteCell.iscreatedTime">createdTime</el-checkbox></el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-tooltip>
                </a>
              </div>
              <!-- 公用按钮组件 -->
              <functionButton style="float:right" :refresh-click="refreshClick" :table-data="tableData" :table-data-all="tableDataAll" :headers-arr="headersArr" :headers-relations="headersRelations"
                @exportAllfn="exportAll" />
            </div>
          </el-row>

          <!-- 任务总表   v-if="queryObj.userName !== ''"-->
          <el-table v-loading="listLoading" :data="tableData" border :row-style="{height:'40px'}" :cell-style="{padding:'0px'}" style="width: 100%;  margin-bottom: 10px;"
            :style="{overflow : splitScreen?'':'auto'}">
            <el-table-column v-if="deleteCell.issender" width="70" prop="sender" label="发送方" show-overflow-tooltip>
              <template slot-scope="scope">
                <!-- scope.row.sender === 1 ? 'WCS':'MES' -->
                <span>{{ setsenderData(scope.row.sender) }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="deleteCell.iseventName" width="240" prop="eventName" label="事件名" show-overflow-tooltip />
            <el-table-column v-if="deleteCell.ismsgData" prop="content" label="内容" show-overflow-tooltip>
              <template slot-scope="scope">
                <span style="cursor: pointer" @click="DataDialogClick(scope.row.content)">{{scope.row.content}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="deleteCell.isretrun" prop="return" label="返回值" show-overflow-tooltip>
              <template slot-scope="scope">
                <span style="cursor: pointer" @click="DataDialogClick(scope.row.return)">{{scope.row.return}}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="deleteCell.isrequestType" width="90" prop="requestType" label="消息类型" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ setrequestTypeData(scope.row.requestType) }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="deleteCell.isstatus" prop="status" label="状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ setstatusData(scope.row.status) }}</span>
              </template>
            </el-table-column>

            <el-table-column v-if="deleteCell.iscreatedTime" prop="createdTime" label="createdTime" width="160" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.createdTime | formatDate }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <paging :pagion-obj="pagionObj" :handle-size-change="handleSizeChange" :handle-page-change="handlePageChange" />
        </el-card>
      </el-col>
      <el-col :span="splitScreen? 8:0">
        <el-card style="height: calc( 100vh - 85px); overflow: auto">
          <el-button style="float: right;" type="text" @click="splitScreen = false">关闭</el-button>
          <el-input type="textarea" v-model="dataDialogData" :rows="20" readonly>{{dataDialogData}}</el-input>
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-dialog :visible.sync="DataDialog">
      <el-input type="textarea" v-model="dataDialogData" :rows="20" readonly>{{dataDialogData}}</el-input>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  GetMesCommunicationLogLog,
  GetMesCommunicationLogBakApi,
} from "@/api/log";
export default {
  name: "MesMsgLog",
  data() {
    return {
      //分屏判断
      splitScreen: false,
      // 请求数据
      queryObj: {
        sender: null,
        eventName: "",
        status: null,
        requestType: null,
        page: 0, // 第几页
        size: 0, // 每页条数
        startTime: "0001/1/1 0:00:00", // 开始日期
        endTime: "0001/1/1 0:00:00", // 结束日期
      },
      pagionObj: {
        size: 10, // 每页几条数据
        currentPage: 1, // 当前第几页数据
        total: 100, // 总数
      },
      // 请求返回的数据
      tableData: [],
      tableDataAll: [],
      statusDataLabel: [
        { value: 1, label: "Wcs等待发送" },
        { value: 2, label: "Wcs等待Reply" },
        { value: 3, label: "Wcs重发" },
        { value: 4, label: "Wcs接收Reply成功" },
        { value: 5, label: "Wcs执行Reply" },
        { value: 11, label: "Mes请求" },
        { value: 12, label: "Mes等待Wcs处理" },
        { value: 13, label: "处理Mes请求中" },
        { value: 14, label: "处理Mes请求已完成" },
        { value: 21, label: "已完成" },
        { value: 22, label: "手动关闭" },
        { value: 23, label: "发生异常" },
      ],
      // 时间数据
      timestart_end: [],
      isopen: false,
      // 页面loding效果
      listLoading: true,
      //收到数据-返回数据 的dialog
      DataDialog: false,
      dataDialogData: "",
      // 列位置 数据
      deleteCell: {
        issender: true,
        ismsgData: true,
        isretrun: true,
        isrequestType: true,
        isstatus: true,
        iseventName: true,
        iscreatedTime: true,
      },
      // excel 数据的key 表头数据
      headersArr: [
        "发送方",
        "收到数据",
        "返回数据",
        "事件名",
        "状态",
        "消息类型",
        "createdTime",
      ],
      // 将表头转换成中文
      headersRelations: {
        发送方: "sender",
        收到数据: "msgData",
        返回数据: "retrunData",
        事件名: "eventName",
        状态: "status",
        消息类型: "requestType",
        createdTime: "createdTime",
      },
    };
  },

  // 监听时间的变化
  watch: {
    timestart_end(newData) {
      if (newData !== null && newData.length > 0) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
  },
  mounted() {
    this.queryData();
  },
  methods: {
    /** 获取页面数据*/
    async queryData() {
      this.listLoading = true;
      this.queryObj.size = this.pagionObj.size;
      this.queryObj.page = this.pagionObj.currentPage;
      const res = await GetMesCommunicationLogLog(this.queryObj);
      console.log(res, "res");
      this.tableData = res.data.data;
      this.pagionObj.pageCount = res.data.pageCount;
      this.pagionObj.total = res.data.count;
      this.listLoading = false;
    },
    //搜索历史按钮
    querHhistory() {
      // GetMesCommunicationLogBakApi
    },
    // 搜索按钮
    queryClick() {
      this.pagionObj.currentPage = 1;
      this.queryData();
    },
    // 刷新按钮
    refreshClick() {
      this.listLoading = true;
      this.queryData();
      this.listLoading = false;
    },
    /** 每页显示数据变化*/
    handleSizeChange(val) {
      this.pagionObj.size = val;
      this.queryData();
    },
    /** 当前页变化*/
    handlePageChange(val) {
      this.pagionObj.currentPage = val;
      this.queryData();
    },
    // 时间选择器处理
    handleDataChanged() {
      if (this.timestart_end !== null) {
        this.queryObj.startTime = this.timestart_end[0];
        this.queryObj.endTime = this.timestart_end[1];
      } else {
        this.queryObj.startTime = "0001/1/1 0:00:00";
        this.queryObj.endTime = "0001/1/1 0:00:00";
      }
    },
    // 展开收起
    isopenclick() {
      this.isopen = !this.isopen;
    },
    // 重置
    resetQuery() {
      this.queryObj.sender = null;
      this.queryObj.eventName = "";
      this.queryObj.status = null;
      this.queryObj.requestType = null;
      this.timestart_end = [];
    },
    //收到数据-返回数据的dialog
    DataDialogClick(data) {
      this.splitScreen = true;
      // this.DataDialog = true;
      this.dataDialogData = data;
      // console.log(data);
    },
    //sender值转换
    setsenderData(data) {
      // if (data === 1) {
      //   return "WCS";
      // } else if (data === 2) {
      //   return "WMS";
      // } else if (data === 3) {
      //   return "MES";
      // }
      switch (data) {
        case 1:
          return "WCS";
        case 3:
          return "WES";
      }
    },
    //requestType值转换
    setrequestTypeData(data) {
      switch (data) {
        case 1:
          return "Report";
        case 2:
          return "Request";
      }
    },
    //status值转换
    setstatusData(data) {
      switch (data) {
        case 1:
          return "Wcs等待发送";
        case 2:
          return "Wcs等待Reply";
        case 3:
          return "Wcs重发";
        case 4:
          return "Wcs接收Reply成功";
        case 5:
          return "Wcs执行Reply";
        case 11:
          return "Mes请求";
        case 12:
          return "Mes等待Wcs处理";
        case 13:
          return "处理Mes请求中";
        case 14:
          return "处理Mes请求已完成";
        case 21:
          return "已完成";
        case 22:
          return "手动关闭";
        case 23:
          return "发生异常";
      }
    },
    // excel导出全部
    async exportAll() {
      const res2 = await GetMesCommunicationLogLog({ size: 10000 });
      this.tableDataAll = res2.data.data;
    },
  },
};
</script>

